<template>
    <div class="wrapper" v-loading="loading">

        <!-- header部分 -->
        <header>
            <p>申请成为商家</p>
        </header>

        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    地址：
                </div>
                <div class="content">
                    <input type="text" v-model="applyform.address" placeholder="地址">
                </div>
            </li>
            <li>
                <div class="title">
                    运送价格：
                </div>
                <div class="content">
                    <el-input-number v-model="applyform.dprice" :min="1" :max="10"
                                     size="mini" label="运费"></el-input-number>
                </div>
            </li>
            <li>
                <div class="title">
                    商店名：
                </div>
                <div class="content">
                    <input type="text" v-model="applyform.name" placeholder="商店名">
                </div>
            </li>
            <li>
                <div class="title">
                    电话：
                </div>
                <div class="content">
                    <input type="text" v-model="applyform.phone" placeholder="电话">
                </div>
            </li>
            <li>
                <div class="title">
                    菜品分类：
                </div>
                <div class="content">
                    <el-select v-model="applyform.type" placeholder="">
                        <el-option
                                v-for="item in good_type"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </li>

        </ul>

        <div class="button-login">
            <button @click="applyBusiness">成为商家</button>
        </div>
        <!--        <div class="button-register">-->
        <!--            <button @click="register">去注册</button>-->
        <!--        </div>-->

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: 'applyBusiness',
        data() {
            return {
                loading: true,
                userId: '',
                password: '',
                applyform: {
                    address: "",//地址
                    dprice: 0,//配送费
                    name: "",//商店名
                    phone: "",//电话
                    userId: "",//用户id
                    type: ""//商品类别
                },
                good_type: [],
                user: null
            }
        },
        methods: {
            async applyBusiness() {
                let flag = true
                for (var e in this.applyform) {
                    if (this.applyform[e] === null || this.applyform[e] === "") {
                        this.$alert_msg(e.toString() + " is not be none")
                        flag = false
                        break
                    }
                }
                if (flag) {
                    let url = "/shop"
                    const res = await this.$ajax_(url, this.applyform, 'post')
                    this.$alert_res(res)
                    if (res.status === 200) {
                        this.$router.push({path: '/myInfo'});
                    }
                }
            },

        },
        created() {
            this.user = JSON.parse(this.$getSessionStorage('user'))
            this.applyform.userId = this.user.id
            let url = "/shop_type/type"
            this.$ajax_(url, null, 'get').then(res => {
                this.good_type = res.data.list
            })
            this.loading = false
        },
        components: {
            Footer
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 表单部分 ******************/
    .wrapper .form-box {
        width: 100%;
        margin-top: 12vw;
    }

    .wrapper .form-box li {
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
        display: flex;
        align-items: center;
    }

    .wrapper .form-box li .title {
        flex: 0 0 18vw;
        font-size: 3vw;
        font-weight: 700;
        color: #666;
    }

    .wrapper .form-box li .content {
        flex: 1;
    }

    .wrapper .form-box li .content input {
        border: none;
        outline: none;
        width: 100%;
        height: 4vw;
        font-size: 3vw;
    }

    .wrapper .button-login {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
    }

    .wrapper .button-login button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #fff;
        background-color: #38CA73;
        border-radius: 4px;

        border: none;
        outline: none;
    }

    .wrapper .button-register {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
    }

    .wrapper .button-register button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        /*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
        color: #666;
        background-color: #EEE;
        border: solid 1px #DDD;
        border-radius: 4px;

        border: none;
        outline: none;
    }

    /****************** 底部菜单部分 ******************/
    .wrapper .footer {
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        background-color: #fff;

        position: fixed;
        left: 0;
        bottom: 0;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .wrapper .footer li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        color: #999;
        user-select: none;
        cursor: pointer;
    }

    .wrapper .footer li p {
        font-size: 2.8vw;
    }

    .wrapper .footer li i {
        font-size: 5vw;
    }
</style>
